<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    #left {
        float: left;
        width: 30%;
        height: 500px;
        margin-left: 200px;
    }

    #right {
        float: right;
        width: 30%;
        height: 500px;
    }

    #top {
        margin-top: 50px;
        float: top;
        width: 30%;
        height: 250px;
    }

    #content {
        border: aquamarine 1px solid;
        width: 100%;
        height: 300px;
    }

    #input {
        margin-top: 20px;
        width: 100%;
        height: 200px;
    }

    #input input {
        width: 100%;
        height: 100px;
    }

    #input button {
        float: right;
    }

    #mes_left {
        float: left;

    }

    #mes_right {
        float: right;
        width: 50%;
        text-align: right;
    }
</style>
<body>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<h3 style="text-align: center" id="username"></h3>
<div>
    <div id="left">
        <h4 id="new"></h4>
        <div id="content">

        </div>
        <div id="input">
            <input type="text" id="input_text">
            <button id="submit">发送</button>
        </div>
    </div>
    <div id="right">
        <div id="top">
            <p>在线的好友</p>
            <div id="hylist">

            </div>
        </div>
        <div id="bottom">
            <p>系统广播</p>
            <div id="xtlist">
            </div>
        </div>
    </div>
</div>
<script>
    var username;
    $(function () {
        var toName;
        $.ajax({
            url: "getUsername",
            success: function (res) {
                username = res;
                $("#username").html("用户：" + username + "<span>在线</span>");
                // $("#username").html("用户：123<span>在线</span>");
            },
            async: false //同步请求，只有上面好了才会接着下面
        });

        var ws = new WebSocket("ws://localhost:8080/chat");
        //建立链接
        ws.onopen = function (ev) {
            $("#username").html("用户：" + username + "<span>在线</span>");
        }
        //链接异常
        ws.onerror = function(evt,e){
            console.log('连接关闭');
            error_action(evt,e)
        };
        //接受消息
        ws.onmessage = function (data) {
            console.log(data)
            var datastr = data.data;
            var res = JSON.parse(datastr);
            //判断是否是系统消息
            if (res.system) {
                //好友列表
                //系统广播
                var names = res.message;
                var userlistStr = "";
                var broadcastListStr = "";
                for (var name of names) {
                    if (name != username) {
                        userlistStr += "<a onclick='showChat(\"" + name + "\")'>" + name + "</a></br>";
                        broadcastListStr += "<p>" + name + "上线了</p>";
                    }
                }
                ;
                $("#hylist").html(userlistStr);
                $("#xtlist").html(broadcastListStr);

            } else {
                //不是系统消息
                var str = "<span id='mes_left'>" + res.message + "</span></br>";
                if (toName == res.fromName)
                    $("#content").append(str);

                var chatdata = sessionStorage.getItem(res.fromName);
                if (chatdata != null) {
                    str = chatdata + str;
                }
                sessionStorage.setItem(res.fromName, str);
            }
            ;
        }

        //断开链接
        ws.onclose = function (ev) {
            console.log("链接断开")
            $("#username").html("用户：" + username + "<span>离线</span>");
        }

        showChat = function (name) {
            // alert("dsaad");
            toName = name;
            //清空聊天区
            $("#content").html("");
            $("#new").html("当前正与" + toName + "聊天");
            var chatdata = sessionStorage.getItem(toName);
            if (chatdata != null) {
                $("#content").html(chatdata);
            }
        };
        //发送消息
        $("#submit").click(function () {
            //获取输入的内容
            var data = $("#input_text").val();
            $("#input_text").val("");
            var json = {"toName": toName, "message": data};
            //将数据展示在聊天区
            var str = "<span id='mes_right'>" + data + "</span></br>";
            $("#content").append(str);

            var chatdata = sessionStorage.getItem(toName);
            if (chatdata != null) {
                str = chatdata + str;
            }
            sessionStorage.setItem(toName, str);
            //发送数据
            ws.send(JSON.stringify(json));
        })
    })
</script>
</body>
</html>